<script setup name="staffadd">
import { ref, reactive } from 'vue'
import staffHttp from '@/api/staffHttp'
import { useRouter } from 'vue-router'
import OAMain from "@/components/OAMain.vue"
import { useAuthStore } from "@/stores/auth"
import { ElMessage } from 'element-plus'


const router = useRouter()
const authStore = useAuthStore()

// 只有部门的leader可以给本部门新增员工
let staffForm = reactive({
  email: "",
  password: "",
  realname: "",
})
const formRef = ref()
let rules = reactive({
  email: [{ required: true, message: "请输入邮箱！", trigger: 'blur' }],
  password: [{ required: true, message: "请输入密码！", trigger: 'blur' }],
  realname: [{ required: true, message: "请输入真实姓名！", trigger: 'blur' }],
})

const onSubmit = () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        await staffHttp.addStaff(staffForm.realname, staffForm.email, staffForm.password)
        ElMessage.success('员工添加成功！')
        router.push({ name: 'staff_list' })
      } catch (detail) {
        ElMessage.error(detail)
      }
    }
  })
}

</script>

<template>
  <OAMain title="新增员工">
    <el-card shadow="always">
      <el-form :rules="rules" :model="staffForm" ref="formRef" label-width="80px">
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="staffForm.realname" placeholder="请输入姓名">
          </el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="staffForm.email" placeholder="请输入邮箱"> </el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="staffForm.password" placeholder="请输入密码" type="password">
          </el-input>
        </el-form-item>

        <el-form-item label="部门">
          <el-input readonly disabled placeholder="请输入部门" :value="authStore.user.department.name">
          </el-input>
        </el-form-item>

        <el-form-item label="领导">
          <el-input readonly disabled :placeholder="'[' + authStore.user.email + ']' + authStore.user.realname">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit"> 提交 </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </OAMain>
</template>

<style scoped></style>